<template>
  <div>
    菜单管理
    <div>
      <!-- <a-button type="dashed" @click="triggerExpand">展开</a-button> -->
      <a-button type="primary" size="medium" style="margin-left: 10px" @click="openDialog(0)">新增</a-button>
    </div>
    <!-- 路由结构展示 -->
    <a-table :pagination="false" :scroll="{ x: '100%', y: '100%' }" ref="tableRef" :columns="Columns" :data="menuList"
      v-model:expanded-keys="expandedKeys" row-key="id">
      <!-- <template #enable="{ record }">{{ record.enable == 1 ? '有效' : '失效' }}</template> -->
      <template #type="{ record }">{{ record.type == "CATALOG" ? '菜单' : '按钮' }}</template>
      <template #handle="{ record }">
        <a-row>
          <a-col :span="8"><a-link type="text" @click="openDialog(record.id)">添加</a-link></a-col>
          <a-col :span="8"><a-link type="text" @click="openDialog(undefined, record.id)">更新</a-link></a-col>
          <a-col :span="8">
            <a-popconfirm content="确认删除？删除后不可恢复" type="warning" @ok="toDelete(record.id)">
              <a-link type="text">删除</a-link>
            </a-popconfirm>

          </a-col>
        </a-row>
      </template>
    </a-table>


    <!-- 新增菜单 -->
    <a-modal :visible="addVisible.visible" title="添加菜单" @cancel="addVisible.visible = false" @before-ok="submitForm"
      modalClass="add__modal" @before-close="resetForm" width="750px">
      <a-form :model="form" ref="formRef">
        <a-form-item field="parentId" label="上级菜单" :rules="[{ required: true, message: '请选择上级菜单' }]"
          v-if="addVisible.title != '编辑菜单'">
          <a-tree-select class="tree__select" :data="menuOptions" v-model="form.parentId" placeholder="请选择父级菜单"
            :field-names="{ title: 'label', key: 'value' }" />
        </a-form-item>
        <a-form-item field="name" label="菜单名称" :rules="[{ required: true, message: '请填写菜单名称' }]">
          <textInput v-model="form.name" placeholder="请输入菜单名称"></textInput>
        </a-form-item>
        <a-form-item field="type" label="菜单类型" :rules="[{ required: true, message: '请选择菜单类型' }]">
          <a-radio-group v-model="form.type">
            <a-radio value="MENU">菜单</a-radio>
            <a-radio value="BUTTON">元素</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="path" label="路由路径" :rules="[{ required: true, message: '请填写路由路径' }]"
          v-if="form.type == 'MENU'">
          <textInput v-model="form.path" placeholder="请输入"></textInput>
        </a-form-item>
        <a-form-item field="component" label="页面路径" :rules="[{ required: true, message: '请填写页面路径' }]"
          v-if="form.type == 'MENU'">
          <textInput v-model="form.component" placeholder="请输入"></textInput>
        </a-form-item>
        <a-form-item field="visible" label="显示状态" v-if="form.type == 'MENU'">
          <a-radio-group v-model="form.visible">
            <a-radio :value="1">显示</a-radio>
            <a-radio :value="0">隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="keepAlive" label="是否缓存" v-if="form.type == 'MENU'">
          <a-radio-group v-model="form.keepAlive">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="sort" label="显示排序" v-if="form.type == 'MENU'">
          <a-input-number class="tree__select" v-model="form.sort" :style="{ width: '320px' }" size="large" />
        </a-form-item>
        <a-form-item field="icon" label="图标" v-if="form.type == 'MENU'">
          <SelectInput v-model="form.icon" placeholder="请输入">
            <template #label="">
              <!-- <span>{{ form.icon }}</span> -->
              <img class="w-6 h-6" :src="`/src/assets/images/icon-svg/${form.icon}.svg`" alt="" srcset="">
            </template>
            <a-option v-for="item in svgList" :key="item" :value="item">
              <img class="w-12 h-12" :src="`/src/assets/images/icon-svg/${item}.svg`" alt="" srcset="">
            </a-option>
          </SelectInput>
        </a-form-item>
        <a-form-item field="perm" label="权限字符" v-if="form.type == 'BUTTON'">
          <textInput v-model="form.perm" placeholder="请输入"></textInput>
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { Message } from '@arco-design/web-vue';
const svgList = [
  'baobiao', 'chengben', 'hegui', 'houxujiliang', 'shujupingjia', 'xitongshezhi', 'zichan', 'zonglan'
]

const Columns: any[] = [
  { title: '菜单名称', dataIndex: 'name', },
  { title: '排序', dataIndex: 'sort', },
  { title: '类型', dataIndex: 'type', },
  { title: '操作', slotName: 'handle' }
]

const menuList = ref([
  {
    "code": 1000,
    "parent_code": 0,
    "parent_name": "根菜单",
    "data_type": "菜单",
    "menu_name": "根菜单",
    "order": 0,
    "children": [
      {
        "code": 1002,
        "parent_code": 1000,
        "parent_name": "根菜单",
        "data_type": "菜单",
        "menu_name": "资源管理",
        "order": 1,
        "children": [
          {
            "code": 1020,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "资源列表查询",
            "order": 2,
            "children": []
          },
          {
            "code": 1021,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "添加资源",
            "order": 2,
            "children": []
          },
          {
            "code": 1022,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "批量导入",
            "order": 2,
            "children": []
          },
          {
            "code": 1023,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "同步关联",
            "order": 2,
            "children": []
          },
          {
            "code": 1024,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "查看资源",
            "order": 2,
            "children": [
              {
                "code": 1029,
                "parent_code": 1024,
                "parent_name": "查看资源",
                "data_type": "菜单",
                "menu_name": "编辑当前版本",
                "order": 3,
                "children": []
              }
            ]
          },
          {
            "code": 1025,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "编辑",
            "order": 2,
            "children": []
          },
          {
            "code": 1026,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "删除",
            "order": 2,
            "children": []
          },
          {
            "code": 1027,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "更新",
            "order": 2,
            "children": []
          },
          {
            "code": 1028,
            "parent_code": 1002,
            "parent_name": "资源管理",
            "data_type": "菜单",
            "menu_name": "查看版本",
            "order": 2,
            "children": [
              {
                "code": 1030,
                "parent_code": 1028,
                "parent_name": "查看版本",
                "data_type": "菜单",
                "menu_name": "查看",
                "order": 3,
                "children": []
              }
            ]
          }
        ]
      },
      {
        "code": 1003,
        "parent_code": 1000,
        "parent_name": "根菜单",
        "data_type": "菜单",
        "menu_name": "资产管理",
        "order": 1,
        "children": [
          {
            "code": 1031,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "头部统计",
            "order": 2,
            "children": []
          },
          {
            "code": 1032,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "资产打包列表查询",
            "order": 2,
            "children": []
          },
          {
            "code": 1033,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "资产打包",
            "order": 2,
            "children": []
          },
          {
            "code": 1034,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "编辑",
            "order": 2,
            "children": []
          },
          {
            "code": 1035,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "查看",
            "order": 2,
            "children": [
              {
                "code": 1038,
                "parent_code": 1035,
                "parent_name": "查看",
                "data_type": "菜单",
                "menu_name": "编辑当前版本",
                "order": 3,
                "children": []
              }
            ]
          },
          {
            "code": 1036,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "更新",
            "order": 100,
            "children": []
          },
          {
            "code": 1037,
            "parent_code": 1003,
            "parent_name": "资产管理",
            "data_type": "菜单",
            "menu_name": "历史版本",
            "order": 2,
            "children": [
              {
                "code": 1039,
                "parent_code": 1037,
                "parent_name": "历史版本",
                "data_type": "菜单",
                "menu_name": "查看",
                "order": 3,
                "children": []
              }
            ]
          }
        ]
      },
      {
        "code": 1019,
        "parent_code": 1000,
        "parent_name": "根菜单",
        "data_type": "菜单",
        "menu_name": "资产登记",
        "order": 1,
        "children": [
          {
            "code": 1040,
            "parent_code": 1019,
            "parent_name": "资产登记",
            "data_type": "菜单",
            "menu_name": "登记列表查询",
            "order": 2,
            "children": []
          },
          {
            "code": 1041,
            "parent_code": 1019,
            "parent_name": "资产登记",
            "data_type": "菜单",
            "menu_name": "上传证书",
            "order": 2,
            "children": []
          },
          {
            "code": 1042,
            "parent_code": 1019,
            "parent_name": "资产登记",
            "data_type": "菜单",
            "menu_name": "查看证书",
            "order": 2,
            "children": [
              {
                "code": 1044,
                "parent_code": 1042,
                "parent_name": "查看证书",
                "data_type": "菜单",
                "menu_name": "证书详情",
                "order": 3,
                "children": [
                  {
                    "code": 1047,
                    "parent_code": 1044,
                    "parent_name": "证书详情",
                    "data_type": "菜单",
                    "menu_name": "上传",
                    "order": 4,
                    "children": []
                  },
                  {
                    "code": 1048,
                    "parent_code": 1044,
                    "parent_name": "证书详情",
                    "data_type": "菜单",
                    "menu_name": "下载",
                    "order": 4,
                    "children": []
                  },
                  {
                    "code": 1049,
                    "parent_code": 1044,
                    "parent_name": "证书详情",
                    "data_type": "菜单",
                    "menu_name": "删除",
                    "order": 4,
                    "children": []
                  }
                ]
              },
              {
                "code": 1045,
                "parent_code": 1042,
                "parent_name": "查看证书",
                "data_type": "菜单",
                "menu_name": "关联资产",
                "order": 3,
                "children": []
              },
              {
                "code": 1046,
                "parent_code": 1042,
                "parent_name": "查看证书",
                "data_type": "菜单",
                "menu_name": "头部资产登记信息",
                "order": 3,
                "children": []
              }
            ]
          },
          {
            "code": 1043,
            "parent_code": 1019,
            "parent_name": "资产登记",
            "data_type": "菜单",
            "menu_name": "删除证书",
            "order": 2,
            "children": []
          }
        ]
      }
    ]
  }
])

const formRef = ref()

const expandedKeys = ref<any[]>([])
const addVisible = reactive({
  title: "",
  visible: false,
}); // 新增菜单弹窗


const form = reactive({
  parentId: 0,
  name: '',
  type: 'MENU',
  path: '',
  component: '',
  visible: 0,
  keepAlive: 1,
  sort: 0,
  icon: '',
  perm: ''
})

const menuOptions = ref<any[]>([])

const menuCacheData = reactive({
  type: "",
  path: "",
});



import type { MenuQuery, MenuForm, MenuVO } from "@/api/system/menu/types";
import {
  listMenus,
  getMenuForm,
  getMenuOptions,
  addMenu,
  deleteMenu,
  updateMenu,
} from "@/api/system/menu";

function handleQuery() {
  // 重置父组件
  listMenus()
    .then(({ data }) => {
      menuList.value = data;
    })
    .then(() => {
    });
}

/**
 * 打开表单弹窗
 *
 * @param parentId 父菜单ID
 * @param menuId 菜单ID
 */
function openDialog(parentId?: number, menuId?: number) {
  console.log(parentId, `parentIdparentIdparentId`);
  console.log(menuId, `menuIdmenuIdmenuIdmenuId`);


  getMenuOptions()
    .then(({ data }) => {
      menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
    })
    .then(() => {
      addVisible.visible = true;
      if (menuId) {
        addVisible.title = "编辑菜单";
        getMenuForm(menuId).then(({ data }) => {
          console.log(data);
          Object.assign(form, data);
          menuCacheData.type = data.type;
          menuCacheData.path = data.path ?? "";
        });
      } else {
        addVisible.title = "新增菜单";
        if (parentId) {
          form.parentId = parentId;
        } else {
          form.parentId = 0
        }
      }
    });
}

/** 菜单保存提交 */
function submitForm() {
  formRef.value.validate().then(() => {
    console.log('通过校验');
    const menuId = form.parentId;
    if (menuId) {
      updateMenu(menuId, form).then(() => {
        Message.success("修改成功");
        addVisible.visible = false
        handleQuery();
      });
    } else {
      addMenu(form).then(() => {
        Message.success("新增成功");
        addVisible.visible = false
        handleQuery();
      });
    }
  })
}

/** 删除菜单 */
function toDelete(menuId: number) {

  deleteMenu(menuId).then(() => {
    Message.success("删除成功");
    handleQuery();
  });
}

function resetForm() {
  Object.assign(form, {
    name: '',
    type: 'MENU',
    path: '',
    component: '',
    visible: 0,
    keepAlive: 1,
    sort: 0,
    icon: '',
    perm: ''
  })
}
onMounted(() => {
  handleQuery();
});

</script>

<style lang="less" scoped>
:deep(.tree__select) {
  width: 328px !important;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #D3DBEB;
}

</style>